<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>
    </ul>

    <p class="color-picker"></p>
    <!-- 事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？
    就是事件从最深的节点开始，然后逐步向上传播事件，
    举个例子：页面上有这么一个节点树，div>ul>li>a;
    比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，
    有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，
    所以都会触发，这就是事件委托，委托它们父级代为执行事件。 -->
    <script>
        var ul = document.querySelector('ul');
        // 优化之后只用绑定一次事件监听器
        ul.onclick = function(event) {
            // 兼容ie
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                var p = document.querySelector('.color-picker');
                p.innerHTML = target.style.backgroundColor;
                p.style.color = target.style.backgroundColor;
            }
        }
    </script>
</body>

</html>